<template>
    <div>
        <mj-title type="h2" title="Anchor 锚点"></mj-title>
        <div class="page-desc">用于跳转到页面指定位置</div>

        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-anchor :data="anchorArray" height="600px" @on-change="handleChange">
                    <div>
                        <div id="ca">
                            <p>尘埃</p>
                            <pre>
                有一年我们排着队奔赴衰老，扭曲着
                各自斑驳的身子
                时间之中，一粒粒
                尘埃，恰好落在孤独的位置
                 
                你松弛的面孔仿佛正遗忘自己
                清晨，你的目光
                犹如地图上破损的线条
                望着薄雾弥漫中
                远飞的蝴蝶，爱会从遥远的记忆中
                诞生
                 
                你对逝去的河流谈及你失语的喉咙
                哀痛便从夏夜溢满星辰的深处流出
                 
                你将在这里，以一种
                巨大的孤独面对自身的遗址
                我走过去
                你忽然向我描绘你清晨时分盛大的婚礼
                 
                2020.5.17
                    </pre>
                        </div>
                        <div id="wt">
                            <p>无题</p>
                            <pre>
                夏至前夕，风以遥远使我面临日暮
                而心生咏叹
                我那时依稀见得
                落霞，在江口的淤雾中降生
                 
                一阵风穿过消瘦、入夜和石桥
                另一阵风，穿过你
                从午后走出
                我便完成了下午，炽热
                和两阵风之间相隔的多年哀愁
                 
                美呵，以至一个完整的暮色过来
                你陪流水已走了多年
                 
                夕霞尽时
                夜色空无一物，看不见来路
                看不见归途
                我喉间失语，如古文中再无音讯的言辞
                 
                2021.6.21
                </pre>
                        </div>
                        <div id="y">
                            <p>雨</p>
                            <pre>
                ——写在郑州大雨的次日夜里
                 
                夏日之中，你内心静得像一处深渊
                暴雨，在远处轰鸣
                也似至哀无声
                静到极尽，你再次看到
                远处雷声：白色吊灯犹如死人
                 
                同样是那天夜里，大雨迅速繁殖
                幽暗的雨水
                绵延着疼痛的子嗣
                生命内外，有两种人间
                我们面面相觑
                ——相信苦难并承认神明
                 
                直至某一刻，突然忆及二十年前
                那时我在暴雨之中迷失
                对于恐惧
                对于内心执意要彻底的感受，我如何能
                 
                如何能
                除哭泣以外的方式
                毫无保留地向你尽数表达出来？
                 
                2021.7.23
                </pre>
                        </div>
                        <div id="time">
                            <p>时间</p>
                            <pre>
                夜深，深如一句你去年未能说完的话
                像步入一条枯瘦而狭长的路
                没有尽头
                所以，那时的夜色
                正等我望着
                所以，当我望着那个地方时
                会感到寂静，且遥远
                 
                我会时常想着
                夏日应该会下几场雨，但是来不及
                一一细数，秋天也要过去了
                于是，我就在想着
                在更久远的一场大雨中，那时
                我在什么地方
                 
                所以，在时间之中
                我望着夜色有太多遗憾。所以，我的遗憾
                比隐于海底的沟壑更深，比时间
                更深——
                 
                2020.10.24
                </pre>
                        </div>
                        <div id="rq">
                            <p>入秋</p>
                            <pre>
                入秋如被弃置，像一个没有面孔的日子
                是一阵阵秋高的风
                还是我内心的夜色，过于深远
                 
                我在床上微微侧着，想象你也在侧着
                眼睛像乍醒的瞬间
                突然看到他省流经此地的河流
                那么遥远
                那么悲伤，没有尽头
                 
                阳光照着我喉间的词，我心中有话
                却不能说出
                 
                清晨，我内心有囤积了数年的尘埃
                有潦草而等待风干的笔迹
                有如书中等待翻过的悲痛一页：风在窗外
                却不进来
                 
                2020.9.4
                </pre>
                        </div>
                    </div>
                </mj-anchor>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <div class="input">
                    <pre>
                        <code class="language-html line-num bers">
                            &lt;template>
                            &lt;mj-anchor :data="anchorArray" height="600px">
                                &lt;div>
                                    &lt;div id="ca">...&lt;/div>
                                    &lt;div id="wt">...&lt;/div>
                                    &lt;div id="y">...&lt;/div>
                                    &lt;div id="time">...&lt;/div>
                                    &lt;div id="rq">...&lt;/div>
                                &lt;/div>
                            &lt;/mj-anchor>
                        &lt;/template>
                
                        &lt;script>
                            export default {
                                data() {
                                    return {
                                        anchorArray: [
                                            {tar: "#ca",title: "尘埃"},
                                            {tar: "#wt",title: "无题"},
                                            {tar: "#y",title: "雨"},
                                            {tar: "#time",title: "时间"},
                                            {tar: "#rq",title: "入秋"},
                                        ],
                                    }
                                }
                            }
                        &lt;/script>
                        </code>
                    </pre>
                </div>
            </mj-tab-pane>
        </mj-tabs>
        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Anchor 参数"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>data</td>
                    <td>锚点数据集合 [{ tar:'#id'(锚点id), title:'锚点1'(锚点名称), children:[{...}] }]</td>
                    <td>Array</td>
                    <td>[]</td>
                </tr>
                <tr>
                    <td>float</td>
                    <td>是否浮动</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>placement</td>
                    <td>锚点提示的位置，可选值为leftTop leftCenter leftBottom rightTop rightCenter rightBottom</td>
                    <td>String</td>
                    <td>leftTop</td>
                </tr>
                <!-- <tr>
                    <td>itemHeight</td>
                    <td>锚点数据项的高度</td>
                    <td>Number</td>
                    <td>30</td>
                </tr> -->
                <tr>
                    <td>height</td>
                    <td>锚点提示的高度(例:600px)</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
            </tbody>
        </table>


        <mj-title type="h6" title="Anchor 事件"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>事件名</th>
					<th>说明</th>
					<th>返回值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>on-change</td>
					<td>点击锚点时触发</td>
					<td>当前数据项</td>
				</tr>
			</tbody>
		</table>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                anchorArray: [{
                        tar: "#ca",
                        title: "尘埃"
                    },
                    {
                        tar: "#wt",
                        title: "无题"
                    },
                    {
                        tar: "#y",
                        title: "雨"
                    },
                    {
                        tar: "#time",
                        title: "时间"
                    },
                    {
                        tar: "#rq",
                        title: "入秋"
                    },
                ],
            };
        },
        methods: {
            handleChange(val) {
                console.log('on-change::',val);
            }
        },
    };
</script>
<style scoped>
    p {
        color: red;
        font-size: 20px;
        margin: 0;
        padding: 0;
    }
</style>
